<template>
    <view class="main">
        <view class="mainbox">
            <u-form :model="form" ref="uForm">
                <u-form-item :border-bottom="false" label-position="top" label="岗位" prop="post">
                    <!-- <u-input placeholder="请选择岗位" @tap="selectshow" :disabled="true" :border="true"  v-model="form.post" /> -->
                <view 
				  style="width: 100%; display: flex; align-items: center; height: 76rpx; color: #dcdfe6; padding-left: 18rpx; border: 1px solid #dcdfe6; border-radius: 8rpx;" 
				  @tap="selectshow"
				>
				  <view :style="{ color: form.post ? '#000000' : '#dcdfe6' }">
				    {{ form.post ? form.post : "请选择岗位" }}
				  </view>
				</view>
                </u-form-item>
                <u-form-item :border-bottom="false" label-position="top" label="省份" prop="province">
                    <u-input placeholder="请输入省份" :border="true"  v-model="form.province" />
                </u-form-item>
                <u-form-item :border-bottom="false" label-position="top" label="城市" prop="city">
                    <u-input placeholder="请输入城市" :border="true"  v-model="form.city" />
                </u-form-item>
                <u-form-item :border-bottom="false" label-position="top" label="姓名" prop="username">
                    <u-input placeholder="请输入姓名" :border="true"  v-model="form.username" />
                </u-form-item>
                <u-form-item :border-bottom="false" label-position="top" label="电话" prop="phone">
                    <u-input maxlength="11" placeholder="请输入电话" :border="true"  v-model="form.phone" />
                </u-form-item>
                <u-form-item :border-bottom="false" label-position="top" label="备注" prop="remark">
                    <u-input placeholder="请输入备注" :border="true"  v-model="form.remark" />
                </u-form-item>
            </u-form>
        </view>

        <view class="mainbottom">
            <u-button shape="circle" type="error" @click="submit">提交</u-button>
        </view>
        <u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
	</view>
</template>

<script>
import { registration } from '@/api/delivery'
    export default {
        data(){
            return{
                form: {
                    username:null,
                    phone:null,
                    province:null,
                    city:null,
                    post:null,
                    remark:null
                },
                show: false,
                list: [
					{
						value: '1',
						label: '区站长'
					},
                    {
						value: '2',
						label: '镇站长'
					},
					{
						value: '3',
						label: '商户'
					},
                    {
						value: '4',
						label: '骑手'
					}
				],
                postnum:null,
                rules: {
                    username: [
                        { 
                            required: true, 
                            message: '请输入姓名', 
                            // 可以单个或者同时写两个触发验证方式 
                            trigger: ['change','blur'],
                        }
                    ],
                    province: [
                        {
                            required: true, 
                            message: '请输入省份', 
                            // 可以单个或者同时写两个触发验证方式 
                            trigger: ['change','blur'],
                        }
                    ],
                    city: [
                        {
                            required: true, 
                            message: '请输入城市', 
                            // 可以单个或者同时写两个触发验证方式 
                            trigger: ['change','blur'],
                        }
                    ],
                    phone: [
                        {
                            required: true, 
                            message: '请输入手机号', 
                            // 可以单个或者同时写两个触发验证方式 
                            trigger: ['change','blur'],

                        },
                        {
                        validator: (rule, value, callback) => {
                            return this.$u.test.mobile(value);
                        },
                        maxlength: 11,
                        message: '手机号码不正确',
                        trigger: ['change', 'blur'],
                        }
                    ],
                    post: [
                        {
                            required: true, 
                            message: '请选择岗位', 
                            // 可以单个或者同时写两个触发验证方式 
                            trigger: ['change','blur'],
                        }
                    ],
                    remark: [
                        {
                            required: true, 
                            message: '请输入备注', 
                            // 可以单个或者同时写两个触发验证方式 
                            trigger: ['change','blur'],
                        }
                    ]
                }
            }
        },
        
        methods:{
            submit() {
                this.$refs.uForm.validate(valid => {
                    if (valid) {
                        console.log('验证通过');
                        let obj={
                            userName:this.form.username,
                            phone:this.form.phone,
                            province:this.form.province,
                            city:this.form.city,
                            post:this.postnum,
                            remark:this.form.remark
                        }
                        registration(obj).then(res=>{
                            console.log('提交表单',res)
                            if(res.code==200){
                                this.$u.toast('提交成功')
                                setTimeout(()=>{
                                    uni.navigateBack({
                                        delta:0
                                    })    
                                },1000)
                            }
                        })
                    } else {
                        console.log('验证失败');
                    }
                });
            },
            selectshow(){
                this.show=true
            },
            confirm(e) {
				console.log(e);
                this.form.post=e[0].label
                this.postnum=e[0].value
			}
        },
        onReady() {
            this.$refs.uForm.setRules(this.rules);
        },
    }
</script>

<style lang="scss" scoped>
    .main{
        padding:28rpx;
        width: 100%;
        min-height: 100vh;
        background-color: #e5e5e5;
        .mainbox{
            background-color: white;
            border-radius: 28rpx;
            padding: 0 28rpx;
            margin-bottom: 150rpx;
        }
        .mainbottom{
            position: fixed;
            bottom: 0;
            left: 0;
            padding: 28rpx;
            width: 100%;
        }
    }
</style>